<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
		<style>
			body { font: normal 12px Arial,Helvetica,Tahoma,Verdana,Sans-Serif; }
			h3{text-indent:30px;}
			#images { list-style-type:none;}
			#images li{float:left; padding:4px;}
			#images li.selected{border:solid 2px blue;padding:2px;}
			input.dimension{width:60px;}
			div.row{margin-top:10px;}
			div.row label{margin-right:5px;}
		</style>
		    <link href="../../../../../Content/css/jquery-ui-1.7.2.custom.css" rel="stylesheet" type="text/css" />
            <script type="text/javascript" src="../../../../../scripts/jquery-1.3.2.min.js"></script>
            <script type="text/javascript" src="../../../../../scripts/jquery-ui-1.7.2.custom.min.js"></script>
	</head>
	<body>
	        <div id="main">
	            <h3>Upload new images</h3>
	            <div>
	                <object id="silverlightUpload" data="data:application/x-silverlight-2," type="application/x-silverlight-2" width="450px" height="300px"> 
                    <param name="source" value="/ClientBin/mpost.SilverlightMultiFileUpload.xap"/>  
                    <param name="initParams" value="MaxFileSizeKB=50000,MaxUploads=2,FileFilter=Jpeg (*.jpg) |*.jpg ,CustomParam=type_Image-name_ContentImages" />
                    <param name="onload" value="pluginLoaded" />
                    <a href="http://go.microsoft.com/fwlink/?LinkID=115261" style="text-decoration: none;"> 
                    <img src="http://go.microsoft.com/fwlink/?LinkId=108181" alt="Get Microsoft Silverlight" style="border-style: none"/>  
                    </a>
                    </object>
                </div>
                <h3>Images</h3>
                <ul id="images">
                
                </ul>
                <h3>Image properties</h3>
                <div>
                    <input id="SelectedImage" type="hidden" />
                    <div>
                        <div class="row"> 
                            <label for="Alt">Alternative text</label>
                            <input id="Alt" type="text" />
                        </div>
                        <div class="row">
                            <label for="Width">Width</label>
                            <input class="dimension" id="Width" type="text" value="150"/>px
                        </div>
                        <div class="row">
                            <label for="Height">Height</label>
                            <input class="dimension" id="Height" type="text" value="150" />px
                        </div>
                    </div>
                </div>
            </div>
        <script type="text/javascript">
            var CKEDITOR = window.parent.CKEDITOR;
            var slCtl = null;
            function pluginLoaded(sender) {
                slCtl = document.getElementById("silverlightUpload");
                slCtl.Content.Files.AllFilesFinished = AllFilesFinished;
                slCtl.Content.Files.SingleFileUploadFinished = SingleFileFinished;
            }

            function AllFilesFinished() {
                $('#main').accordion('activate', 1);
            }



            function SingleFileFinished(sender, args) {

                $('#images').append('<li><img src="/Service/Thumbnail/70/70/ContentImages/' + args.FileName + '" />');
            }

            $(document).ready(function() {
                $.getJSON("/Service/ContentImages", null, function(data) {
                    $.each(data, function(index, file) {
                        $('#images').append('<li><img src="/Service/Thumbnail/70/70/ContentImages/' + file + '" />');
                    });
                });
                $('#images li:first').addClass('selected');
                $('#main').accordion({ autoHeight: false });
                $('#main').accordion('activate', 1);

                $('#images li').live('click', function() {
                    var selected = this;
                    $('#images li').each(function() {
                        $(this).removeClass('selected');
                    });
                    $(selected).addClass('selected');
                    var selectedImgurl = $('#images li.selected img').attr("src");
                    var filename = selectedImgurl.substr(selectedImgurl.lastIndexOf('/') + 1);
                    $('#SelectedImage').val(filename);
                });
            });
            
        </script>
	</body>
</html>
